<style>
	.addButton {
		width: 20px;
		height: 20px;
		line-height: 16px;
		text-align: center;
		border-radius: 50%;
		background: #3b3df2;
		color: #fff;
		margin-right: 5px;
		cursor: pointer;
	}
</style>
<template>
	<div style="height: 100%;">
		<div @click="addData" class="displayFlex point" style="margin-bottom: 10px;">
			<div class="addButton">+</div>
			<div>新增</div>
		</div>

		<div v-if="dataList && dataList[0] && dataList[0].length > 0"
			style="height: calc(100% - 40px);overflow-y: auto;overflow-x: hidden;" v-infinite-scroll="load">
			<div v-for="(secondData,index3) in dataList" :key="index3">
				<div v-for="(item,index) in secondData" :key="index" @click="editThis(item)"
					style="background: #fff;border-radius: 16px;margin-bottom: 10px;padding: 20px;">

					<div style="font-size: 16px;margin-bottom: 10px;">
						<span>{{item.technologyName}}</span>
						<span style="font-size: 12px;">（{{item.technologyCode}}）</span>
					</div>
					<el-row :gutter="20">
						<el-col :span="12">
							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #f5f5f5;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/sIcon48.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">产生源</div>
							</div>
							<el-table :data="item.sourceList" border size="mini" stripe
								style="width: 100%;height: 215px;overflow-y: auto;border-radius: 8px;">
								<el-table-column type="index" width="50">
								</el-table-column>
								<el-table-column prop="sourceCode" label="产生源编号">
								</el-table-column>
								<el-table-column prop="sourceName" label="产生源名称" width="180">
								</el-table-column>
								<el-table-column prop="busiStatusStr" label="状态" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.busiStatus !='NOT_USE'" type="success" size="mini">启用</el-tag>
										<el-tag v-else type="danger" size="mini">停用</el-tag>
									</template>
								</el-table-column>
							</el-table>
						</el-col>

						<el-col :span="12" v-if="item.linkList">

							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #f5f5f5;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/sIcon49.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">
									<span>产污环节</span>
									<span style="font-size: 10px;">({{item.linkList.length}})</span>
								</div>
							</div>
							<el-table :data="item.linkList" border size="mini" stripe
								style="width: 100%;height: 215px;overflow-y: auto;border-radius: 8px;">
								<el-table-column type="index" width="50">
								</el-table-column>
								<el-table-column prop="linkCode" label="编号">
								</el-table-column>
								<el-table-column prop="linkName" label="名称">
								</el-table-column>
								<el-table-column prop="sourceName" label="产生源">
								</el-table-column>
								<el-table-column prop="pollutionNameList" label="废物列表" width="180">
									<template slot-scope="scope">
										<div>{{scope.row.pollutionNameList.join("，")}}</div>
									</template>
								</el-table-column>
								<el-table-column prop="busiStatusStr" label="状态" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.busiStatus !='NOT_USE'" type="success" size="mini">启用</el-tag>
										<el-tag v-else type="danger" size="mini">停用</el-tag>
									</template>
								</el-table-column>
							</el-table>
						</el-col>

					</el-row>
				</div>
			</div>
		</div>

		<div v-else style="background: #fff;border-radius: 16px;">
			<el-empty description="暂无内容"></el-empty>
		</div>

		<el-dialog :visible.sync="visible1" top="2%" title="生产项目" width="70%" @close="getDataList(false)">
			<el-tabs :value="activeName" @tab-click="handleClick">
				<el-tab-pane label="生产项目基本信息" name="one">
					<el-form ref="form" :model="form" :rules="formRules" label-width="140px">
						<el-form-item label="生产项目编号" prop="technologyCode">
							<el-input v-model="form.technologyCode" style="width: 300px;"></el-input>
						</el-form-item>
						<el-form-item label=" 生产项目名称" prop="technologyName">
							<el-input v-model="form.technologyName" style="width: 300px;"></el-input>
						</el-form-item>

						<div style="text-align: center;">
							<template v-if="form.isEdit">
								<el-button v-if="form.busiStatus== 'IN_USE'" type="danger" @click="updateBusiStatus(form,'technology')">
									停用
								</el-button>
								<el-button v-else type="success" @click="updateBusiStatus(form,'technology')">
									启用
								</el-button>
							</template>

							<el-button type="primary" @click="saveInfo(1)">保存</el-button>
							<el-button type="primary" @click="saveInfo(2)">保存并继续</el-button>
						</div>
					</el-form>
				</el-tab-pane>

				<el-tab-pane label="产生源" name="two">
					<div class="displayFlex" style="margin-bottom: 10px;">
						<el-button type="primary" size="small" @click="visible2 = true,sourceParams = $options.data().sourceParams">
							+ 添加产生源
						</el-button>
						<el-select v-model="sourceGetParams.busiStatus" filterable placeholder="请选择" size="small"
							style="margin-left: 10px;" @change="getsourceData">
							<el-option label="启用" value="IN_USE" />
							<el-option label="停用" value="NOT_USE" />
						</el-select>
					</div>

					<el-table :data="sourceList" border size="mini">
						<el-table-column type="index" width="50">
						</el-table-column>
						<el-table-column prop="sourceCode" label="产生源名称" width="180">
						</el-table-column>
						<el-table-column prop="sourceName" label="产生源编号" width="180">
						</el-table-column>
						<el-table-column prop="busiStatusStr" label="状态">
						</el-table-column>
						<el-table-column prop="createTime" label="创建时间">
						</el-table-column>

						<el-table-column label="操作" width="100" align="center">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="sourceParams = scope.row,visible2 = true">编辑</el-button>

								<el-button @click="updateBusiStatus(scope.row,'source')" v-if="scope.row.busiStatus == 'IN_USE'"
									type="text" size="small">停用</el-button>
								<el-button @click="updateBusiStatus(scope.row,'source')" v-else type="text" size="small">启用</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>

				<el-tab-pane label="产污环节" name="three">
					<div class="displayFlex" style="margin-bottom: 10px;">
						<el-button type="primary" size="small" @click="addLinkData()">
							+ 添加产污环节信息
						</el-button>

						<el-select v-model="gasLinkGetParams.busiStatus" filterable placeholder="请选择" size="small"
							style="margin-left: 10px;" @change="getLinkData">
							<el-option label="启用" value="IN_USE" />
							<el-option label="停用" value="NOT_USE" />
						</el-select>
					</div>


					<el-table :data="linkList" border size="mini">
						<el-table-column type="index" width="50">
						</el-table-column>
						<el-table-column prop="linkName" label="产生源名称" width="100">
						</el-table-column>
						<el-table-column prop="linkCode" label="产污环节编号" width="100">
						</el-table-column>
						<el-table-column prop="sourceName" label="产生源" width="100">
						</el-table-column>
						<el-table-column prop="pollutionNameList" label="废物列表" width="180">
						</el-table-column>
						<el-table-column prop="busiStatusStr" label="状态" width="80">
						</el-table-column>
						<el-table-column prop="createTime" label="创建时间" width="140">
						</el-table-column>
						<el-table-column label="操作" align="center" fixed="right">
							<template slot-scope="scope">

								<el-popover placement="right" width="400" trigger="click">
									<div style="text-align: center;">
										<vue-qr :text="scope.row.id" :size="250" />
										<div style="font-weight: bold">{{scope.row.linkName}}</div>
									</div>
									<el-button type="text" size="small" slot="reference">二维码</el-button>
								</el-popover>

								<el-button @click="showXunJianList(scope.row)" style="margin-left: 10px;" type="text"
									size="small">巡检项</el-button>

								<el-button type="text" size="small" @click="gasLinkParams = scope.row,visible3 = true">编辑</el-button>

								<el-button @click="updateBusiStatus(scope.row,'gasLink')" v-if="scope.row.busiStatus == 'IN_USE'"
									type="text" size="small">停用</el-button>
								<el-button @click="updateBusiStatus(scope.row,'gasLink')" v-else type="text" size="small">启用</el-button>

							</template>
						</el-table-column>
					</el-table>


				</el-tab-pane>

			</el-tabs>
		</el-dialog>

		<el-dialog :visible.sync="visible2" top="2%" title="产生源信息" :modal="false" width="40%">
			<el-form ref="form2" :model="sourceParams" :rules="formRules2" label-width="140px">

				<el-form-item label="产生源编号" prop="sourceCode">
					<el-input v-model="sourceParams.sourceCode"></el-input>
				</el-form-item>

				<el-form-item label="产生源名称" prop="sourceName">
					<el-input v-model="sourceParams.sourceName"></el-input>
				</el-form-item>

				<div style="text-align: center;">
					<el-button type="primary" @click="saveSource()">保存</el-button>
				</div>
			</el-form>
		</el-dialog>

		<el-dialog v-if="visible3" :visible.sync="visible3" top="2%" title="产污环节" :modal="false" width="40%">
			<el-form ref="form3" :model="gasLinkParams" :rules="formRules3" label-width="140px">

				<el-form-item label="产生源" prop="sourceId">
					<el-select v-model="gasLinkParams.sourceId" style="width: 100%;" filterable>
						<el-option :label="item.sourceName" :value="item.id" v-for="(item,index) in sourceList">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="产污环节名称" prop="linkName">
					<el-input v-model="gasLinkParams.linkName"></el-input>
				</el-form-item>

				<el-form-item label="产污环节编号" prop="linkCode">
					<el-input v-model="gasLinkParams.linkCode"></el-input>
				</el-form-item>

				<el-form-item label="污染物" prop="pollutionList">
					<el-select v-model="gasLinkParams.pollutionList" multiple collapse-tags style="width: 100%;" placeholder="请选择"
						filterable>
						<el-option v-for="item in pollutionList" :key="item.id" :label="item.pollutionName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<div style="text-align: center;">
					<el-button type="primary" @click="saveGasLink(1)">保存</el-button>
				</div>
			</el-form>
		</el-dialog>


		<el-dialog :visible.sync="xunjian.show" top="2%" title="巡检项信息" :modal="false" width="30%">
			<el-form :model="xunjian.params" label-width="140px">
				<el-form-item label="巡检项名称" prop="inspectItemName" required>
					<el-input v-model="xunjian.params.inspectItemName" placeholder="巡检项信息"></el-input>
				</el-form-item>

				<el-form-item label="记录值类型" prop="valueType">
					<el-select v-model="xunjian.params.valueType" placeholder="记录值类型" style="width: 100%;">
						<el-option label="数值" value="NUMBER" />
						<el-option label="状态" value="STATE" />
					</el-select>
				</el-form-item>

				<div style="text-align: center;margin-top: 50px;">
					<el-button type="primary" @click="saveXunJian(1)">保存</el-button>
				</div>
			</el-form>
		</el-dialog>

		<el-dialog :visible.sync="linkItemList.show" top="2%" title="巡检项列表" :modal="false" width="30%">
			<template v-if="linkItemList.data.length > 0">
				<el-tag v-for="(item,index) in linkItemList.data" :key="index" effect="dark" closable class="point"
					@close="deleteInspectItem(item)" @click="xunjian.params = item,xunjian.show = true"
					style="margin-right: 10px;margin-bottom: 10px;">
					{{item.inspectItemName}}
				</el-tag>
			</template>
			<el-button style="margin-left: 10px;height: 32px;line-height: 30px; padding-top: 0; padding-bottom: 0;"
				size="small"
				@click="xunjian.show=true,xunjian.params = $options.data().xunjian.params,xunjian.params.linkId=linkItemList.id">
				+ 添加巡检项
			</el-button>
		</el-dialog>
	</div>
</template>

<script>
	let that
	import VueQr from 'vue-qr'
	export default {
		components: {
			VueQr
		},
		data() {
			return {
				dataList: [],
				params: {
					ticketId: '',
				},
				visible1: false,
				visible2: false,
				visible3: false,
				activeName: 'one',
				form: {},

				sourceParams: {},
				gasLinkParams: {},
				sourceGetParams: {
					busiStatus: "IN_USE"
				},
				gasLinkGetParams: {
					busiStatus: "IN_USE"
				},
				formRules: {
					technologyCode: [{
						required: true,
						message: '生产项目编号',
						trigger: 'blur'
					}],
					technologyName: [{
						required: true,
						message: '生产项目名称',
						trigger: 'blur'
					}],
				},

				formRules2: {
					sourceCode: [{
						required: true,
						message: '产生源编号',
						trigger: 'blur'
					}],
					sourceName: [{
						required: true,
						message: '产生源名称',
						trigger: 'blur'
					}]
				},

				formRules3: {
					sourceId: [{
						required: true,
						message: '产生源',
						trigger: 'blur'
					}],
					linkCode: [{
						required: true,
						message: '产污环节编号',
						trigger: 'blur'
					}],
					linkName: [{
						required: true,
						message: '产生源名称',
						trigger: 'blur'
					}],
					pollutionList: [{
						required: true,
						message: '污染物',
						trigger: 'blur'
					}]
				},
				pollutionList: [],
				unitList: [],
				sourceList: [],
				linkList: [],
				pageIndex: 0,
				totalPage: 0,
				xunjian: {
					show: false,
					params: {
						linkId: '', // 防治设施id
						inspectItemName: '', // 巡检项名称
						valueType: 'NUMBER', // 记录值类型
					}
				},
				linkItemList: {
					id: '',
					show: false,
					data: []
				},
			}
		},

		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.ajax({
				url: '/codeType/listCodeValue',
				data: {
					typeCode: 'UNIT_TYPE'
				},
				success: function(data) {
					if (data.status == 1) that.unitList = data.data;
				}
			});

			that.getDataList()
			that.getEntPollutionList()
		},

		methods: {

			deleteInspectItem(item) {
				this.$confirm('是否确定删除此巡检项?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasLink/deleteLinkItemLogicById',
						data: {
							linkItemId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.showXunJianList({
									id: that.linkItemList.id
								})
							}
						},
					})
				})
			},


			showXunJianList(item) {
				that.ajax({
					url: '/gasLink/getLinkItemListByLinkId',
					data: {
						linkId: item.id
					},
					success: function(result) {
						that.linkItemList.data = result.data
						that.linkItemList.show = true
						that.linkItemList.id = item.id
					}
				});
			},

			//保存巡检项
			saveXunJian() {
				if (!that.xunjian.params.inspectItemName) return that.$message.error("请填写完整")
				that.ajax({
					url: '/gasLink/saveGasLinkItem',
					data: JSON.stringify(that.xunjian.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.xunjian.show = false
							that.showXunJianList({
								id: that.linkItemList.id
							})
						}
					},
				})
			},

			addLinkData() {
				that.visible3 = true
				that.gasLinkParams = that.$options.data().gasLinkParams
				that.ajax({
					url: '/gasLink/getLinkCode',
					data: {},
					success: function(data) {
						that.gasLinkParams.linkCode = data.data
						that.$forceUpdate()
					}
				});
			},

			addData() {
				that.visible1 = true
				that.form = {}
				that.sourceList = []
				that.linkList = []
				that.$forceUpdate()
			},

			getLinkData() {
				let newArr = []
				for (let item of that.form.linkList) {
					//console.log(item,that.gasLinkGetParams.busiStatus)
					if (item.busiStatus == that.gasLinkGetParams.busiStatus) newArr.push(item)
				}
				that.linkList = newArr
			},

			getsourceData() {
				let newArr = []
				for (let item of that.form.sourceList) {
					//console.log(item,that.gasLinkGetParams.busiStatus)
					if (item.busiStatus == that.sourceGetParams.busiStatus) newArr.push(item)
				}
				that.sourceList = newArr
			},

			getEntPollutionList() {
				that.ajax({
					url: '/entPollution/getEntPollutionList',
					data: JSON.stringify({
						pollutionType: "GAS_POLLUTION"
					}),
					contentType: 'application/json',
					success: function(result) {
						that.pollutionList = result.data
					},
				})
			},

			//删除生成设施
			deleteProductionEquipmentBase() {
				this.$confirm('是否确定删除此防治设施?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasOutlet/deleteGasOutletMaterial',
						data: {
							defenceId: that.form.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.visible1 = false
								that.getDataList()
							}
						},
					})
				})
			},

			//编辑
			editThis(item) {
				item.isEdit = true
				that.form = item
				that.sourceList = item.sourceList
				that.linkList = item.linkList
				that.visible1 = true

				that.getLinkData()
				that.getsourceData()
			},

			load() {
				if (that.totalPage >= that.pageIndex) return false
				that.pageIndex += 1
				that.getDataList()
			},

			//保存产生源
			saveSource() {
				this.$refs['form2'].validate(function(valid) {
					if (valid) {
						that.sourceParams.technologyId = that.form.id
						that.ajax({
							url: 'gasSource/saveGasSource',
							data: JSON.stringify(that.sourceParams),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.getGasTechnologyById()
									that.visible2 = false
									return that.$message({
										message: '保存成功！',
										type: 'success'
									});
								}
							},
						})
					}
				})
			},

			//保存原辅料
			saveGasLink() {
				this.$refs['form3'].validate(function(valid) {
					if (valid) {
						that.gasLinkParams.technologyId = that.form.id
						that.ajax({
							url: 'gasLink/saveGasLink',
							data: JSON.stringify(that.gasLinkParams),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.getGasTechnologyById()
									that.visible3 = false
									return that.$message({
										message: '保存成功！',
										type: 'success'
									});
								}
							},
						})
					}
				})
			},

			updateBusiStatus(source, type) {
				this.$confirm('是否确定此操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (type == "source") {
						that.ajax({
							url: '/gasSource/updateBusiStatus',
							data: {
								sourceId: source.id
							},
							contentType: 'application/x-www-form-urlencoded',
							success: function(result) {
								if (result.data) {
									that.getGasTechnologyById()
								}
							},
						})
					} else if (type == 'gasLink') {
						that.ajax({
							url: '/gasLink/updateBusiStatus',
							data: {
								linkId: source.id
							},
							contentType: 'application/x-www-form-urlencoded',
							success: function(result) {
								if (result.data) {
									that.getGasTechnologyById()
								}
							},
						})
					} else if (type == 'technology') {
						that.ajax({
							url: '/gasTechnology/updateBusiStatus',
							data: {
								technologyId: source.id
							},
							contentType: 'application/x-www-form-urlencoded',
							success: function(result) {
								if (result.data) {
									that.getGasTechnologyById()
								}
							},
						})
					}

				})
			},

			//删除原辅料
			deleteMaterial(item) {
				this.$confirm('是否确定删除此原辅料?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasOutlet/deleteGasOutletMaterial',
						data: {
							gasOutletMaterialId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.getGasTechnologyById()
							}
						},
					})
				})
			},

			//获取基本信息
			getGasTechnologyById() {
				that.ajax({
					url: '/gasTechnology/getGasTechnologyById',
					data: {
						technologyId: that.form.id
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.form = result.data
							that.form.isEdit = true
							that.sourceList = result.data.sourceList
							that.linkList = result.data.linkList

							that.getLinkData()
							that.getsourceData()
						}
					},
				})
			},

			handleClick(tab, event) {
				if (tab.name != "one") {
					if (!that.form.id) {
						that.activeName = "one"
						return that.$message({
							message: '请先完善生产项目信息',
							type: 'warning'
						});
					}
				}
			},

			saveInfo(step) {
				this.$refs['form'].validate(function(valid) {
					if (valid) {
						that.ajax({
							url: '/gasTechnology/saveGasTechnology?ticketId=' +
								that.params.ticketId,
							data: JSON.stringify(that.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) that.form.id = result.data
								if (step == 2) that.activeName = "two"
								return that.$message({
									message: '保存成功！',
									type: 'success'
								});
							},
						})
					}
				})
			},

			getDataList(isShow = true) {
				let pageIndex = that.pageIndex + 1
				that.ajax({
					url: '/gasTechnology/pageGasTechnology' + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + pageIndex + '&pageSize=20',
					data: JSON.stringify({
						//outletId: that.outletId,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList[that.pageIndex] = result.data.records
							that.totalPage = 1
							that.$forceUpdate()
						}
					},
				}, isShow)
			},


		}
	}
</script>


<style scoped>
	.display_Flex_Bet {
		display: flex;
		justify-content: space-between;
	}
</style>